<template>
	<view class="container">


		<!-- 上班自动打卡 -->
		<view class="title-bg">
			<view class="title-text">
				<text>上班自动打卡</text>
			</view>
		</view>
		<view class="body-bg ">
			<view type="default" class=" padding-text">
			<uni-row>
				<uni-col :span="12">
					<view class="text-left">上班自动打卡</view>
				</uni-col>
				<uni-col :span="12">
					<view class="view-center">
						<view class="text-right btn-bg">
							<switch :checked="dakaSetting.shangbanAuto == 1" style="transform:scale(0.7)"
								@change="shangbanAutoChange" />
						</view>
					</view>
					
				</uni-col>
			</uni-row>
			</view>

		</view>
		<view class="body-bg ">
			<view class="padding-text">
				<picker type="default" :range="shangbanStartOptions" class="btn-bg" @change="shangbanStartChange">
					<uni-row>
						<uni-col :span="12">
							<view class="text-left">开始时间</view>
						</uni-col>
						<uni-col :span="12">
							<view class="text-right">{{ shangbanStartOptions[dakaSetting.shangbanStart] }}
								<uni-icons type="right"> </uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</picker>
			</view>
		</view>
		<view class="body-bg ">
			<view class="padding-text">
				<picker type="default" :range="shangbanEndOptions" class="btn-bg" @change="shangbanEndChange">
					<uni-row>
						<uni-col :span="12">
							<view class="text-left">结束时间</view>
						</uni-col>
						<uni-col :span="12">
							<view class="text-right">{{ shangbanEndOptions[dakaSetting.shangbanEnd] }}
								<uni-icons type="right"> </uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</picker>
			</view>
			
		</view>

		<!-- 早退设置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>下班自动打卡</text>
			</view>
		</view>
		
		
		
		
		<view class="body-bg ">
			<view type="default" class=" padding-text">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">下班自动打卡</view>
					</uni-col>
					<uni-col :span="12">
						<view class="view-center">
							<view class="text-right btn-bg">
								<switch :checked="dakaSetting.xiabanAuto == 1" style="transform:scale(0.7)"
									@change="xiabanAutoChange" />
							</view>
						</view>
						
						
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="body-bg ">
			<view class="padding-text">
				<picker type="default" :range="xiabanStartOptions" class="btn-bg" @change="xiabanStartChange">
					<uni-row>
						<uni-col :span="12">
							<view class="text-left">开始时间</view>
						</uni-col>
						
						<uni-col :span="12">
							<view class="text-right">{{ xiabanStartOptions[dakaSetting.xiabanStart] }}
								<uni-icons type="right"> </uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</picker>
			</view>
		</view>
		<view class="body-bg ">
			<view class="padding-text">
				<picker type="default" :range="xiabanEndOptions" class="btn-bg" @change="xiabanEndChange">
					<uni-row>
						<uni-col :span="12">
							<view class="text-left">结束时间</view>
						</uni-col>
						<uni-col :span="12">
							<view class="text-right">{{ xiabanEndOptions[dakaSetting.xiabanEnd] }}
								<uni-icons type="right"> </uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'

	export default {
		data() {
			return {
				kaoqinSetting: {},
				dakaSetting: {},
				shangbanStartOptions: [
					'上班前2小时',
					'上班前1小时',
					'上班前30分钟'
				],
				shangbanEndOptions: [
					'上班时间',
					'上班后15分钟',
					'上班后30分钟',
					'上班后1小时'
				],
				xiabanStartOptions: [
					'下班时间',
					'下班后5分钟',
					'下班后10分钟',
					'下班后15分钟',
					'下班后30分钟',
					'下班后1小时'
				],
				xiabanEndOptions: [
					'下班后1小时',
					'下班后2小时',
					'下班后3小时',
					'下班后4小时',
				]
			}
		},
		onReady() {
			console.log('kaoqin setting onready')
			this.fetchData()
		},
		methods: {
			fetchData() {
				websock.getUserDakaSetting().then(res => {
					console.log('user daka setting', res)
					this.dakaSetting = res
				})
			},
			updateData() {
				websock.updateUserDakaSetting(this.dakaSetting).then(res => {
					this.fetchData()
				})
			},
			shangbanAutoChange(e) {
				console.log('shangban auto change', e.detail.value)
				this.dakaSetting.shangbanAuto = ~~e.detail.value
				this.updateData()
			},
			shangbanStartChange(e) {
				console.log('shangban start change', e.detail.value)
				this.dakaSetting.shangbanStart = e.detail.value
				this.updateData()
			},
			shangbanEndChange(e) {
				console.log('shangban end change', e.detail.value)
				this.dakaSetting.shangbanEnd = e.detail.value
				this.updateData()
			},
			xiabanAutoChange(e) {
				console.log('xiaban auto change', e.detail.value)
				this.dakaSetting.xiabanAuto = ~~e.detail.value
				this.updateData()
			},
			xiabanStartChange(e) {
				console.log('xiaban start change', e.detail.value)
				this.dakaSetting.xiabanStart = e.detail.value
				this.updateData()
			},
			xiabanEndChange(e) {
				console.log('xiaban end change', e.detail.value)
				this.dakaSetting.xiabanEnd = e.detail.value
				this.updateData()
			},
			


		}
	}
</script>

<style>
	.container {
		padding: 20px;
		background: linear-gradient(to bottom, #E8F5FD 50%, #F5F5F5 100%);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
/* 	.btn-bg {
		background-color: #f8f8f8;
		line-height: 24px;
		border: 1px solid #DCDCDC;
		border-bottom-style: none;
		padding: 10px;
		font-size: 15px;
	
	}
	
	.radius-up {
		border-radius: 5px 5px 0px 0px;
	}
	
	.radius-down {
		border-top-style: solid;
		border-bottom-style: solid;
		border-radius: 0px 0px 5px 5px;
	} */
	.view-center {
		position: relative;
	}
	
	.view-center view {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
	}

	.title-bg {
		height: 50px;
		background: linear-gradient(90deg, #ECF4FF 0%, rgba(180, 210, 255, 0) 100%);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.title-text {
		padding-top: 15px;
		padding-left: 15px;
		font-size: 17px;
		font-weight: bold;
		color: #333333;
		line-height: 20px;
	}

	.body-bg {
		background-color: #f8f8f8;
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		height: 38px;
		font-size: 15px;
		color: #333333;

	}

	.body-picker {
		padding: 12px 14px 0px 14px;
		height: 76rpx;
	}

	.body-btn {
		padding: 1px;
		height: 96rpx;

	}
	.padding-text{
		padding: 10px 0px 0px 0px;
	}

	.btn-bg {
		padding-top: 19px;
		font-size: 15px;
		border-radius: 1px;
	}

	.btn-bg::after {
		border: none;
	}

	.text-right {
		padding-right: 10px;
		text-align: right;
	}

	.text-left {
		padding-left: 10px;
		text-align: left;
	}
</style>
